<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园 - 辅导员管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a90e2;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --text-color: #2c3e50;
            --border-color: #dcdde1;
            --background-color: #f5f6fa;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
        }

        .dashboard {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* 统计卡片样式 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card i {
            font-size: 2.5em;
            color: var(--primary-color);
            margin-right: 20px;
        }

        .stat-info h3 {
            margin: 0;
            font-size: 0.9em;
            color: #666;
        }

        .stat-info p {
            margin: 5px 0 0;
            font-size: 1.8em;
            font-weight: bold;
            color: var(--primary-color);
        }

        /* 操作栏样式 */
        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .search-group {
            display: flex;
            gap: 10px;
            flex: 1;
            margin-right: 1rem;
        }

        .search-input {
            position: relative;
            flex: 1;
        }

        .search-input i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
        }

        .search-input input {
            width: 100%;
            padding: 10px 10px 10px 35px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        /* 按钮样式 */
        .btn-primary, .btn-success, .btn-danger {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .btn-primary { background: var(--primary-color); }
        .btn-success { background: var(--success-color); }
        .btn-danger { background: var(--danger-color); }

        .btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        /* 表格样式 */
        .table-responsive {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th {
            background: #f8f9fa;
            padding: 15px;
            text-align: left;
            font-weight: 600;
            color: var(--text-color);
        }

        .table td {
            padding: 15px;
            border-top: 1px solid var(--border-color);
        }

        .table tr:hover {
            background-color: #f8f9fa;
        }

        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
        }

        .btn-page {
            padding: 8px 15px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
        }

        .btn-page:hover {
            background: var(--primary-color);
            color: white;
        }

        /* 模态框样式 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .modal-content {
            position: relative;
            background: white;
            width: 90%;
            max-width: 500px;
            margin: 50px auto;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateY(-100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: var(--text-color);
        }

        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
        }

        /* 加载动画 */
        .loading-spinner {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .action-bar {
                flex-direction: column;
                gap: 1rem;
            }

            .search-group {
                width: 100%;
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="dashboard">
    <!-- 顶部统计卡片 -->
    <div class="stats-container">
        <div class="stat-card">
            <i class="fas fa-user-tie"></i>
            <div class="stat-info">
                <h3>总辅导员数</h3>
                <p id="totalInstructors">0</p>
            </div>
        </div>
        <div class="stat-card">
            <i class="fas fa-building"></i>
            <div class="stat-info">
                <h3>所属部门数</h3>
                <p id="totalDepartments">0</p>
            </div>
        </div>
        <div class="stat-card">
            <i class="fas fa-user-plus"></i>
            <div class="stat-info">
                <h3>本月新增</h3>
                <p id="monthlyNew">0</p>
            </div>
        </div>
    </div>

    <!-- 搜索和操作区 -->
    <div class="action-bar">
        <div class="search-group">
            <div class="search-input">
                <i class="fas fa-search"></i>
                <input type="text" id="searchID" placeholder="搜索辅导员ID">
            </div>
            <div class="search-input">
                <i class="fas fa-user"></i>
                <input type="text" id="searchName" placeholder="搜索辅导员姓名">
            </div>
            <button id="searchBtn" class="btn-primary">
                <i class="fas fa-search"></i> 搜索
            </button>
        </div>
        <button id="addInstructorBtn" class="btn-success">
            <i class="fas fa-plus"></i> 添加辅导员
        </button>
    </div>

    <!-- 数据表格 -->
    <div class="table-responsive">
        <table id="instructorTable" class="table">
            <thead>
            <tr>
                <th>辅导员ID</th>
                <th>辅导员姓名</th>
                <th>密码</th>
                <th>部门ID</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据将通过JS动态加载 -->
            </tbody>
        </table>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-container">
        <button id="prevPage" class="btn-page">
            <i class="fas fa-chevron-left"></i> 上一页
        </button>
        <div class="page-info">
            第 <span id="currentPage">1</span> 页
        </div>
        <button id="nextPage" class="btn-page">
            下一页 <i class="fas fa-chevron-right"></i>
        </button>
    </div>
</div>

<!-- 模态框 -->
<div id="editModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">编辑辅导员信息</h3>
            <button class="close-btn" id="closeModal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="editInstID">辅导员ID</label>
                <input type="text" id="editInstID" class="form-control">
            </div>
            <div class="form-group">
                <label for="editInstName">辅导员姓名</label>
                <input type="text" id="editInstName" class="form-control">
            </div>
            <div class="form-group">
                <label for="editDepID">部门ID</label>
                <input type="text" id="editDepID" class="form-control">
            </div>
            <div class="form-group">
                <label for="editTelephone">电话</label>
                <input type="text" id="editTelephone" class="form-control">
            </div>
            <div class="form-group">
                <label for="editPassword">密码</label>
                <input type="password" id="editPassword" class="form-control">
            </div>
        </div>
        <div class="modal-footer">
            <button id="saveChanges" class="btn-primary">
                <i class="fas fa-save"></i> 保存
            </button>
            <button id="cancelEdit" class="btn-secondary">
                <i class="fas fa-times"></i> 取消
            </button>
        </div>
    </div>
</div>

<!-- 加载动画 -->
<div id="loadingSpinner" class="loading-spinner">
    <div class="spinner"></div>
</div>

<script>
    $(document).ready(function() {
        let page = 1; // 初始化页码
        let size = 5; // 每页显示的记录数
        let instructorsData = []; // 存储加载的辅导员数据
        let currentName = ""; // 当前搜索的辅导员姓名
        let currentID = ""; // 当前搜索的辅导员ID

        // 加载辅导员数据
        function loadInstructors(page, size, name = "", id = "") {
            $.ajax({
                url: "/attend_war/admin/instructors",
                method: "GET",
                dataType: "json",
                data: {
                    page: page,
                    size: size,
                    name: name,
                    id: id
                },
                success: function(data) {
                    instructorsData = data; // 保存辅导员数据
                    let tableContent = "";
                    $.each(data, function(index, instructor) {
                        tableContent += "<tr>";
                        tableContent += "<td>" + instructor.instID + "</td>";
                        tableContent += "<td>" + instructor.instName + "</td>";
                        tableContent += "<td>" + instructor.password + "</td>";
                        tableContent += "<td>" + instructor.depID + "</td>";
                        tableContent += "<td>" + instructor.telephone + "</td>";
                        tableContent += "<td>";
                        tableContent += '<button class="edit-btn" data-id="' + instructor.instID + '">编辑</button>';
                        tableContent += '<button class="delete-btn" data-id="' + instructor.instID + '">删除</button>';
                        tableContent += "</td>";
                        tableContent += "</tr>";
                    });
                    $("#instructorTable tbody").html(tableContent);
                    $("#currentPage").text(page);
                },
                error: function(jqXHR, textStatus) {
                    alert("获取辅导员数据失败: " + textStatus);
                }
            });
        }

        // 搜索按钮事件
        $("#searchBtn").click(function() {
            currentName = $("#searchName").val(); // 获取辅导员姓名
            currentID = $("#searchID").val(); // 获取辅导员ID
            page = 1; // 重置页码
            loadInstructors(page, size, currentName, currentID);
        });

        // 添加辅导员按钮事件
        $("#addInstructorBtn").click(function() {
            $("#modalTitle").text("添加辅导员信息");
            $("#editInstID").val(""); // 清空辅导员ID
            $("#editInstName").val(""); // 清空辅导员姓名
            $("#editDepID").val(""); // 清空部门ID
            $("#editTelephone").val(""); // 清空电话
            $("#editPassword").val(""); // 清空密码
            $("#editModal").data('original-id', null); // 置空原始ID
            $("#editModal").fadeIn(); // 显示模态框
        });

        // 编辑辅导员信息
        $(document).on('click', '.edit-btn', function() {
            const originalInstID = $(this).data('id'); // 获取原始辅导员ID
            const instructor = instructorsData.find(i => i.instID === originalInstID); // 查找辅导员

            if (instructor) {
                $("#editInstID").val(instructor.instID); // 设置输入框为原始辅导员ID
                $("#editInstName").val(instructor.instName); // 设置输入框为当前辅导员姓名
                $("#editDepID").val(instructor.depID); // 设置输入框为部门ID
                $("#editTelephone").val(instructor.telephone); // 设置输入框为电话
                $("#editPassword").val(instructor.password); // 清空密码
                $("#editModal").data('original-id', originalInstID); // 储存原始ID到模态框数据中
                $("#modalTitle").text("编辑辅导员信息");
                $("#editModal").fadeIn(); // 显示编辑模态框
            }
        });

        $("#saveChanges").click(function() {
            const originalInstID = $("#editModal").data('original-id'); // 从模态框中获取原始辅导员ID
            const newInstID = $("#editInstID").val(); // 获取用户输入的新辅导员ID
            const newInstName = $("#editInstName").val(); // 获取用户输入的新辅导员姓名
            const newDepID = $("#editDepID").val(); // 获取用户输入的新部门ID
            const newTelephone = $("#editTelephone").val(); // 获取用户输入的新电话
            const newPassword = $("#editPassword").val(); // 获取用户输入的新密码

            // 构造更新对象
            const instructorData = {
                id: originalInstID, // 原始的辅导员ID
                instID: newInstID, // 新的辅导员ID
                password: newPassword, // 用户输入的新密码
                instName: newInstName, // 用户输入的新辅导员姓名
                depID: newDepID, // 用户输入的新部门ID
                telephone: newTelephone // 用户输入的新电话
            };

            const method = originalInstID ? "PUT" : "POST"; // PUT用于编辑，POST用于添加

            // 发起 AJAX 请求
            $.ajax({
                url: "/attend_war/admin/instructors",
                method: method,
                contentType: "application/json",
                data: JSON.stringify(instructorData), // 将对象转换为 JSON 字符串
                success: function() {
                    if (method === "POST") {
                        instructorsData.push(instructorData); // 添加新辅导员到数据数组
                    } else {
                        const index = instructorsData.findIndex(i => i.instID === originalInstID);
                        if (index !== -1) {
                            instructorsData[index] = instructorData; // 更新已存在的辅导员信息
                        }
                    }

                    alert("保存成功");
                    $("#editModal").fadeOut(); // 隐藏编辑模态框
                    loadInstructors(page, size, currentName, currentID); // 重新加载辅导员数据
                },
                error: function() {
                    alert("保存辅导员信息失败");
                }
            });
        });

        // 取消编辑
        $("#cancelEdit").click(function() {
            $("#editModal").fadeOut(); // 隐藏编辑模态框
        });

        // 删除辅导员
        $(document).on('click', '.delete-btn', function() {
            const instID = $(this).data('id');

            if (confirm("确定要删除该辅导员吗？")) {
                $.ajax({
                    url: "/attend_war/admin/instructors?instID=" + instID,
                    method: "DELETE",
                    success: function() {
                        alert('辅导员删除成功');
                        loadInstructors(page, size, currentName, currentID); // 重新加载辅导员数据
                    },
                    error: function() {
                        alert('删除辅导员失败');
                    }
                });
            }
        });

        // 分页按钮事件
        $("#prevPage").click(function() {
            if (page > 1) {
                page--;
                loadInstructors(page, size, currentName, currentID); // 使用当前搜索条件
            }
        });

        $("#nextPage").click(function() {
            page++;
            loadInstructors(page, size, currentName, currentID); // 使用当前搜索条件
        });

        // 首次加载辅导员数据
        loadInstructors(page, size);
    });
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>